<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="品牌"
      >
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1"
      >
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2"
      >
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3"
      >
      </el-table-column>
    </el-table>
    <div>{{multipleSelection}}</div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）"
      >
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）"
      >
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '李小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '李小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }
      ],
      multipleSelection: []
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 要求第一列和第二列进行合并
      if (columnIndex in [0, 1]) { // 0 列和 1 列需要处理合并, 列序号从0开始
        let theList = this.tableData.filter((item) => {
          return item.name === row.name
        }) // // 要合并的所有行的列表
        let the = theList[0] // 取第一行
        if (the.id === row.id) { // 如果这一行是需要合并的第一行
          return [theList.length, 1] // 返回需要跨几行,列固定跨1列
        } else {
          // 如果不是合并行的第一行, 那么就不占用空间, 0行,0列
          return [0, 0]
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // debugger
      // console.log(arguments)
      // 要求数据必须是连续的
      if (columnIndex === 1) {
        // 判断要合并的列的索引值是否是要合并的那一列
        // 列序号从0开始
        // 找到第一个需要合并的行
        let the = this.tableData.find((item) => {
          return item.name === row.name
        })
        if (the.id === row.id) { // 如果这一行是需要合并的第一行
          let thelength = this.tableData.filter((item) => {
            return item.name === row.name
          }).length // 算出有几行是这个值
          return {
            rowspan: thelength, // 返回需要跨几行
            colspan: 1 // 列固定跨1列
          }
        } else {
          return { // 如果不是合并行的第一行, 那么就不占用空间, 0行,0列
            rowspan: 0, // 占用0行
            colspan: 0 // 占用0列
          }
        }
      }
    },
    // toggleSelection(rows) {
    //   debugger
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row)
    //     })
    //   } else {
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    handleSelectionChange(val) {
      // 当选项改变时, 这里接收到一个数组, 里面是被选中的项
      console.log(val)
      this.multipleSelection = val
    }
  }
}
</script>
